
import {useEffect, useState} from 'react'

/**
 * 清除副作用
 *  在useEeffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常
 *  把它叫做副作用操作，比如在useEffect中开启一个定时器，我们想在组件卸载
 *  时把这个定时器在清理掉，这个过程就叫做清理副作用
 */


function Son(){
  useEffect(()=>{
    const timer = setInterval(()=>{
      //开启定时器，如果没有return的话，定时器就不会被清除
      console.log('定时器执行中....')
    },1000)
    return ()=>{
      //关闭定时器
      clearInterval(timer)
    }
  },[])
  return(
    <div>
      this is Son
    </div>
  )
}


function App() {
  const [show,setShow] = useState(true)

  

  return (
    <div>
      {show && <Son/>}
      <button onClick={()=>{var i = !show;setShow(i)}}>修改</button>
     
    </div>
  )
}

export default App;
